<template>
    <div>
        <Bread :breaddata="breaddata"></Bread>
        <div class="formControlArea">
            <div></div>
            <div style="display: flex">
                <mainTipsMessage></mainTipsMessage>
            </div>
        </div>
        <el-alert
            title="操作提示"
            type="warning"
            @close="$store.commit('showListMessage')"
            v-show="$store.state.listMessageFlag"
        >
            <template slot="title">
                <div class="iconSize">操作提示：</div>
                <div class="iconSize">
                    1、此设置由平台技术人员维护，请谨慎操作，如操作不当会影响商城正常使用
                </div>
            </template>
        </el-alert>

        <el-form
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            class="uploadSettingClass"
            label-width="100px"
        >
            <el-form-item :label="$t('oss.type') + '：'" size="mini">
                <el-radio-group v-model="dataForm.type">
                    <el-radio :label="1">{{ $t("oss.type1") }}</el-radio>
                    <el-radio :label="2">{{ $t("oss.type2") }}</el-radio>
                    <el-radio :label="3">{{ $t("oss.type3") }}</el-radio>
                    <el-radio :label="4">{{ $t("oss.type4") }}</el-radio>
                    <el-radio :label="5">{{ $t("oss.type5") }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="dataForm.type === 1">
                <el-form-item
                    prop="qiniuDomain"
                    :label="$t('oss.qiniuDomain') + '：'"
                >
                    <el-input
                        v-model="dataForm.qiniuDomain"
                        :placeholder="$t('oss.qiniuDomainTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qiniuPrefix"
                    :label="$t('oss.qiniuPrefix') + '：'"
                >
                    <el-input
                        v-model="dataForm.qiniuPrefix"
                        :placeholder="$t('oss.qiniuPrefixTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qiniuAccessKey"
                    :label="$t('oss.qiniuAccessKey') + '：'"
                >
                    <el-input
                        v-model="dataForm.qiniuAccessKey"
                        :placeholder="$t('oss.qiniuAccessKeyTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qiniuSecretKey"
                    :label="$t('oss.qiniuSecretKey') + '：'"
                >
                    <el-input
                        v-model="dataForm.qiniuSecretKey"
                        :placeholder="$t('oss.qiniuSecretKeyTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qiniuBucketName"
                    :label="$t('oss.qiniuBucketName') + '：'"
                >
                    <el-input
                        v-model="dataForm.qiniuBucketName"
                        :placeholder="$t('oss.qiniuBucketNameTips')"
                    ></el-input>
                </el-form-item>
            </template>
            <template v-else-if="dataForm.type === 2">
                <el-form-item
                    prop="aliyunDomain"
                    :label="$t('oss.aliyunDomain') + '：'"
                >
                    <el-input
                        v-model="dataForm.aliyunDomain"
                        :placeholder="$t('oss.aliyunDomainTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="aliyunPrefix"
                    :label="$t('oss.aliyunPrefix') + '：'"
                >
                    <el-input
                        v-model="dataForm.aliyunPrefix"
                        :placeholder="$t('oss.aliyunPrefixTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="aliyunEndPoint"
                    :label="$t('oss.aliyunEndPoint') + '：'"
                >
                    <el-input
                        v-model="dataForm.aliyunEndPoint"
                        :placeholder="$t('oss.aliyunEndPointTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="aliyunAccessKeyId"
                    :label="$t('oss.aliyunAccessKeyId') + '：'"
                >
                    <el-input
                        v-model="dataForm.aliyunAccessKeyId"
                        :placeholder="$t('oss.aliyunAccessKeyIdTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="aliyunAccessKeySecret"
                    :label="$t('oss.aliyunAccessKeySecret') + '：'"
                >
                    <el-input
                        v-model="dataForm.aliyunAccessKeySecret"
                        :placeholder="$t('oss.aliyunAccessKeySecretTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="aliyunBucketName"
                    :label="$t('oss.aliyunBucketName') + '：'"
                >
                    <el-input
                        v-model="dataForm.aliyunBucketName"
                        :placeholder="$t('oss.aliyunBucketNameTips')"
                    ></el-input>
                </el-form-item>
            </template>
            <template v-else-if="dataForm.type === 3">
                <el-form-item
                    prop="qcloudDomain"
                    :label="$t('oss.qcloudDomain') + '：'"
                >
                    <el-input
                        v-model="dataForm.qcloudDomain"
                        :placeholder="$t('oss.qcloudDomainTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qcloudPrefix"
                    :label="$t('oss.qcloudPrefix') + '：'"
                >
                    <el-input
                        v-model="dataForm.qcloudPrefix"
                        :placeholder="$t('oss.qcloudPrefixTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qcloudAppId"
                    :label="$t('oss.qcloudAppId') + '：'"
                >
                    <el-input
                        v-model="dataForm.qcloudAppId"
                        :placeholder="$t('oss.qcloudAppIdTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qcloudSecretId"
                    :label="$t('oss.qcloudSecretId') + '：'"
                >
                    <el-input
                        v-model="dataForm.qcloudSecretId"
                        :placeholder="$t('oss.qcloudSecretIdTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qcloudSecretKey"
                    :label="$t('oss.qcloudSecretKey') + '：'"
                >
                    <el-input
                        v-model="dataForm.qcloudSecretKey"
                        :placeholder="$t('oss.qcloudSecretKeyTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qcloudBucketName"
                    :label="$t('oss.qcloudBucketName') + '：'"
                >
                    <el-input
                        v-model="dataForm.qcloudBucketName"
                        :placeholder="$t('oss.qcloudBucketNameTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="qcloudRegion"
                    :label="$t('oss.qcloudRegion') + '：'"
                >
                    <el-select
                        v-model="dataForm.qcloudRegion"
                        clearable
                        :placeholder="$t('oss.qcloudRegionTips')"
                        class="w-percent-100"
                    >
                        <el-option
                            value="ap-beijing-1"
                            :label="$t('oss.qcloudRegionBeijing1')"
                        ></el-option>
                        <el-option
                            value="ap-beijing"
                            :label="$t('oss.qcloudRegionBeijing')"
                        ></el-option>
                        <el-option
                            value="ap-shanghai"
                            :label="$t('oss.qcloudRegionShanghai')"
                        ></el-option>
                        <el-option
                            value="ap-guangzhou"
                            :label="$t('oss.qcloudRegionGuangzhou')"
                        ></el-option>
                        <el-option
                            value="ap-chengdu"
                            :label="$t('oss.qcloudRegionChengdu')"
                        ></el-option>
                        <el-option
                            value="ap-chongqing"
                            :label="$t('oss.qcloudRegionChongqing')"
                        ></el-option>
                        <el-option
                            value="ap-singapore"
                            :label="$t('oss.qcloudRegionSingapore')"
                        ></el-option>
                        <el-option
                            value="ap-hongkong"
                            :label="$t('oss.qcloudRegionHongkong')"
                        ></el-option>
                        <el-option
                            value="na-toronto"
                            :label="$t('oss.qcloudRegionToronto')"
                        ></el-option>
                        <el-option
                            value="eu-frankfurt"
                            :label="$t('oss.qcloudRegionFrankfurt')"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>
            <template v-else-if="dataForm.type === 4">
                <el-form-item
                    prop="localDomain"
                    :label="$t('oss.localDomain') + '：'"
                >
                    <el-input
                        v-model="dataForm.localDomain"
                        :placeholder="$t('oss.localDomainTips')"
                    ></el-input>
                </el-form-item>
            </template>
            <template v-else-if="dataForm.type === 5">
                <el-form-item
                    prop="fastdfsDomain"
                    :label="$t('oss.fastdfsDomain') + '：'"
                >
                    <el-input
                        v-model="dataForm.fastdfsDomain"
                        :placeholder="$t('oss.fastdfsDomainTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="localPrefix"
                    :label="$t('oss.localPrefix') + '：'"
                >
                    <el-input
                        v-model="dataForm.localPrefix"
                        :placeholder="$t('oss.localPrefixTips')"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="localPath"
                    :label="$t('oss.localPath') + '：'"
                >
                    <el-input
                        v-model="dataForm.localPath"
                        :placeholder="$t('oss.localPathTips')"
                    ></el-input>
                </el-form-item>
            </template>
            <el-form-item>
                <el-button type="primary" @click="dataFormSubmitHandle()"
                    >保存</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import Bread from "@/components/bread";
    // import { deleteReason } from '@/api/url'

    import debounce from "lodash/debounce";
    export default {
        data() {
            return {
                breaddata: ["网站管理", "高级设置", "文件上传设置"],
                dataForm: {
                    type: 0,
                    qiniuDomain: "",
                    qiniuPrefix: "",
                    qiniuAccessKey: "",
                    qiniuSecretKey: "",
                    qiniuBucketName: "",
                    aliyunDomain: "",
                    aliyunPrefix: "",
                    aliyunEndPoint: "",
                    aliyunAccessKeyId: "",
                    aliyunAccessKeySecret: "",
                    aliyunBucketName: "",
                    qcloudDomain: "",
                    qcloudPrefix: "",
                    qcloudAppId: 0,
                    qcloudSecretId: "",
                    qcloudSecretKey: "",
                    qcloudBucketName: "",
                    qcloudRegion: "",
                    localDomain: "",
                    fastdfsDomain: "",
                    localPrefix: "",
                    localPath: "",
                },
            };
        },
        components: { Bread },

        computed: {
            dataRule() {
                return {
                    qiniuDomain: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qiniuAccessKey: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qiniuSecretKey: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qiniuBucketName: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    aliyunDomain: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    aliyunEndPoint: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    aliyunAccessKeyId: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    aliyunAccessKeySecret: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    aliyunBucketName: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qcloudDomain: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qcloudAppId: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qcloudSecretId: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qcloudSecretKey: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qcloudBucketName: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    qcloudRegion: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    localDomain: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    fastdfsDomain: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                    localPath: [
                        {
                            required: true,
                            message: this.$t("validate.required"),
                            trigger: "blur",
                        },
                    ],
                };
            },
        },
        created() {
            this.getInfo();
        },
        methods: {
            // 获取信息
            getInfo() {
                this.$http
                    .get("/admin-api/file/info")
                    .then(({ data: res }) => {
                        if (res.code !== 200) {
                            return this.$message.error(res.msg);
                        }
                        this.dataForm = res.data;
                    })
                    .catch(() => {});
            },
            // 表单提交
            dataFormSubmitHandle: debounce(
                function () {
                    this.$refs["dataForm"].validate((valid) => {
                        if (!valid) {
                            return false;
                        }
                        this.$http
                            .post("/admin-api/file", this.dataForm)
                            .then(({ data: res }) => {
                                if (res.code !== 200) {
                                    return this.$message.error(res.msg);
                                }
                                this.$message({
                                    message: "修改成功",
                                    type: "success",
                                    duration: 1500,
                                });
                            })
                            .catch(() => {});
                    });
                },
                1000,
                { leading: true, trailing: false }
            ),
        },
    };
</script>
<style lang="scss" scoped>
    .uploadSettingClass {
        width: 1000px;
        margin: 30px auto;
    }
    /deep/.el-input {
        width: 600px;
    }
    // /deep/.el-table td {
    //   padding: 5px 0;
    // }
</style>
